<template>
  <div id="realTimeWaterLevel">
    <div id="mainLevel"></div>
    <div class="bottom">
      <div class="left">
        <div class="can1">
          <div>
            <canvas id="pie1" width="68px" height="68px"></canvas>
          </div>
          <div class="shodaw">{{nowRain}}</div>
          <div>实时水位</div>
        </div>
        <div class="can2">
          <div>{{nowTime}}</div>
        </div>
        <div class="can3">
          <div>
            <canvas id="pie2" width="68px" height="68px"></canvas>
          </div>
          <div class="shodaw">{{nowLevel}}</div>
          <div>实时雨量</div>
        </div>
      </div>
      <!-- <div class="right">
               <div class="title">数据记录</div>
               <ul class="head">
                   <li>水位</li>
                   <li>雨量</li>
                   <li>评测</li>
               </ul>
               <div class="body">
                   <div>
                        <ul class="detail">
                                <li>{{data.rain[0]}}</li>
                                <li>{{data.level[0]}}</li>
                                <li>良好</li>
                        </ul>
                        <ul class="detail">
                                <li>{{data.rain[1]}}</li>
                                <li>{{data.level[1]}}</li>
                                <li>良好</li>
                        </ul>
                        <ul class="detail">
                                <li>{{data.rain[2]}}</li>
                                <li>{{data.level[2]}}</li>
                                <li>良好</li>
                        </ul>
                        <ul class="detail">
                                <li>{{data.rain[3]}}</li>
                                <li>{{data.level[3]}}</li>
                                <li>良好</li>
                        </ul>
                   </div>
               </div>
      </div>-->
    </div>
  </div>
</template>

<script>
import axios from "axios";
import echarts from "echarts"; //引入echarts
export default {
  name: "realTimeWaterLevel",
  data() {
    return {
      data: { time: [], level: [], rain: [] },
      nowRain: 0,
      nowLevel: 0,
      nowTime: "",
    };
  },
  mounted() {
    this.getData();
    var that = this;
    setInterval(that.getData, 5000);
  },
  methods: {
    getCanvas() {
      var that = this;
      // new Chart("pie2").ratePie(60);
      // new Chart2("pie1").ratePie2(80);
      if (that.nowLevel > 0) {
        new Chart("pie2").ratePie(parseInt(that.nowLevel) * 10);
      }
      if (that.nowRain > 0) {
        new Chart2("pie1").ratePie2(parseInt(that.nowRain) * 10);
      }
    },
    getData() {
      var that = this;
      axios.get("index.php?g=api&m=index&a=getLatestWork").then(function (res) {
        var data = res.data.content;
        console.log(data, 999999);
        for (var i = 0; i < data.length; i++) {
          that.data.time.push(data[i].time);
          that.data.level.push(Number(data[i].level));
          that.data.rain.push(Number(data[i].rain));
        }
        //console.log(that.data.rain)
        that.data.time.reverse();
        that.data.level.reverse();
        that.data.rain.reverse();
        console.log(that.data.time, 9999900000);
        that.nowTime = that.data.time[that.data.time.length - 1];
        that.nowRain = that.data.rain[that.data.rain.length - 1];
        that.nowLevel = that.data.level[that.data.level.length - 1];
        that.getReport();
        that.getCanvas();
      });
    },
    getReport() {
      var dataee = this.data.rain;
      var dataaa = this.data.level;
      var databb = this.data.time;
      console.log(dataee, 3333355);
      var myChart = this.$echarts.init(document.getElementById("mainLevel"));
      console.log(1111, myChart);
      var option = null;
      option = {
        tooltip: {
          trigger: "axis",
          axisPointer: {
            type: "cross",
            label: {
              backgroundColor: "#6a7985",
            },
          },
          icon: "circle",
          textStyle: {
            // 提示框内容的样式
            color: "#FFF",
            fontSize: 10,
          },
        },
        grid: {
            top:"30%",
          left: "3%",
          right: "8%",

          bottom: "0%",
          containLabel: true,
        },
        xAxis: [
          {
            type: "category",
            boundaryGap: false,
            data: databb,
            axisLabel: {
              show: true,
              textStyle: {
                color: "#00F4FC",
                fontSize: 10,
              },
              margin: 10, // 刻度标签与轴线之间的距离
            },
          },
        ],
        yAxis: {
          axisLabel: {
            textStyle: {
              color: "#4281EC",
              fontSize: 10,
            },
            margin: 10, // 刻度标签与轴线之间的距离
          },
          axisLine: {
            // 坐标轴 轴线
            show: false, // 是否显示
            symbol: ["none", "arrow"], // 是否显示轴线箭头
            symbolSize: [8, 8], // 箭头大小
            symbolOffset: [0, 7], // 箭头位置
            // ------   线 ---------
            lineStyle: {
              color: "#063A80",
              width: 3,
              type: "solid",
            },
          },
          splitLine: {
            // gird 区域中的分割线
            show: true, // 是否显示
            lineStyle: {
              color: "#3CB5FC",
              width: 1,
              type: "solid",
            },
          },
          // splitArea: {     // 网格区域
          //   show: true   // 是否显示，默认为false
          // }
        },
        series: [
          {
            name: "实时雨量",
            type: "line",
            smooth: true,
            symbol: "circle",
            symbolSize: 5,
            sampling: "average",
            itemStyle: {
              normal: {
                color: "#FF1D1D",
              },
            },
            stack: "a",
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#FF1D1D",
                  },
                  {
                    offset: 1,
                    color: "#1DEBFF",
                  },
                ]),
              },
            },
            data: dataee,
          },
          {
            name: "实时水位",
            type: "line",
            smooth: true,
            stack: "a",
            symbol: "circle",
            symbolSize: 5,
            sampling: "average",
            itemStyle: {
              normal: {
                color: "#1DEBFF",
              },
            },
            areaStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#1DEBFF",
                  },
                  {
                    offset: 1,
                    color: "#1DEBFF",
                  },
                ]),
              },
            },
            data: dataaa,
          },
        ],
      };
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
        window.addEventListener("resize", () => {
          myChart.resize();
        });
      }
      //console.log("执行力",option)
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
#realTimeWaterLevel {
  width: 24vw;
  height: 27.6vh;
  background-image: url(https://yxhz.cst-info.cn/admin/themes/simplebootx/Public/yxshow/img/level.png);
  background-repeat: no-repeat;
  background-size: 100% 100%;
}
#realTimeWaterLevel #mainLevel {
  width: 100%;
  height: 15vh;
}
.bottom {
  display: flex;
  justify-content: flex-start;
}
.bottom .left {
  width: 100%;
  height: 12.9vh;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-size: 0.1rem;
}
.bottom .left .can1,
.bottom .left .can3 {
  position: relative;
}
.bottom .left .can1 div:last-child,
.bottom .left .can3 div:last-child {
  background-color: rgba(4, 106, 210, 0.4);
  width: 4.1vw;
  line-height: 2.8vh;
  text-align: center;
  margin: 0 auto;
  margin-top: 0.8vh;
  border-left: 2px solid #046ad2;
  border-right: 2px solid #046ad2;
}
.bottom .left .can2 {
  display: flex;
  align-items: flex-end;
  height: 12.0vh;
  padding: 0 2vw;
}
.bottom .left .can2 div {
  line-height: 60px;
}
#pie1,
#pie2 {
  margin: 0 auto;
  display: block;
}
.bottom .left .can1 div:first-child,
.bottom .left .can3 div:first-child {
  position: relative;
  z-index: 999;
  height: 6.29vh;
}
.shodaw {
  position: absolute;
  width: 3.54vw;
  height: 6.29vh;
  border-radius: 150px;
  border: 4px solid rgba(234, 238, 244, 0.2);
  top: 0px;
  left: 6px;
  z-index: 10;
  line-height: 6.29vh;
  text-align: center;
  font-size: 10px;
}
.bottom .right {
  width: 43vw;
  height: 42.3vh;
  background-color: #060a3d;
  color: #32c7fe;
  padding: 0 60px 30px 60px;
  font-size: 40px;
}
.bottom .right .title {
  text-align: center;
  line-height: 100px;
}
.bottom .right .head {
  display: flex;
  justify-content: flex-start;
}
.bottom .right .head li {
  width: 230px;
  text-align: center;
}
.bottom .right .body {
  width: 100%;
  height: 270px;
}
.bottom .right .body > div {
  width: 100%;
  height: 270px;
}
.bottom .right .body ul {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
}
.bottom .right .body ul li {
  width: 230px;
  line-height: 68px;
  text-align: center;
}
</style>